<%--
  Created by IntelliJ IDEA.
  User: 45309
  Date: 2020/6/11
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>文件上传</title>
    <link rel="stylesheet" href="<%=path%>/assets/css/all.css">
    <link rel="stylesheet" href="<%=path%>/assets/layui/css/layui.css">
    <style>
        .weui_uploader_file {
            float: left;
            margin-right: 9px;
            margin-bottom: 9px;
            width: 150px;
            height: 150px;
            background: no-repeat 50%;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="rightContent" style="margin: 0 auto;">
            <ul class="weui_uploader_files" style="overflow:hidden"></ul>
        <input type="file" name="upload_file" id="upload_file">
        <button type="button" id="up" class="layui-btn layui-btn-radius layui-btn-normal">上传文件</button>

        </div>
    </div>
</div>
<%--<form name="formUpload" action="<%=path%>/product/api/upload" method="post" enctype="multipart/form-data">--%>
<%--    <input type="file" name="upload_file">--%>
<%--    <input type="submit" value="上传文件">--%>
<%--</form>--%>
<script src="<%=path%>/assets/js/jquery-3.2.1.min.js"></script>
<script>
    $("#up").click(function () {
        var formData = new FormData();
        if(!$('#upload_file')[0].files[0]){
            alert("请先上传图片!");
            return;
        }
        formData.append('upload_file', $('#upload_file')[0].files[0]); // 固定格式
        $.ajax({
            url: '<%=path%>/product/api/upload',
            type: "POST",//方法类型
            dataType: "json",//预期服务
            // 器返回的数据类型
            data: formData,
            contentType: false,
            processData: false,
            async: false,
            success(res) {
                if (res.code === 0) {
                    alert("上传成功！");
                    var img = '<li class=\"weui_uploader_file\" style=\"background-image:url(' + res.data.url + ')\"></li>';
                    $('.weui_uploader_files').html(img);
                } else {
                    alert(res.msg);
                }
            },
            error(err) {
                debugger
                alert(err.msg);
            }
        })
    })

</script>
</body>
</html>
